<template>
  <div class="employee-form-container">
    <h2 class="form-title">添加新员工</h2>

    <el-form ref="form" :model="employee" label-width="120px">
      <!-- 第一列 -->
      <el-form-item label="员工姓名">
        <el-input v-model="employee.employeeName" placeholder="请输入员工姓名"></el-input>
      </el-form-item>

      <el-form-item label="员工性别">
        <el-select v-model="employee.gender" placeholder="请选择性别">
          <el-option label="男" :value="0"></el-option>
          <el-option label="女" :value="1"></el-option>
          <el-option label="未知" :value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="员工电话">
        <el-input v-model="employee.employeePhone" placeholder="请输入联系电话"></el-input>
      </el-form-item>

      <el-form-item label="员工邮件">
        <el-input v-model="employee.email" placeholder="请输入电子邮箱"></el-input>
      </el-form-item>

      <!-- 第二列 -->
      <el-form-item label="员工部门">
        <el-input v-model="employee.departmentId" placeholder="请输入所属部门"></el-input>
      </el-form-item>

      <el-form-item label="员工角色">
        <el-select v-model="employee.role" placeholder="请选择员工类型">
          <el-option label="员工" :value="0"></el-option>
          <el-option label="部门经理" :value="1"></el-option>
          <el-option label="副总经理" :value="2"></el-option>
          <el-option label="总经理" :value="3"></el-option>
          <el-option label="人事人员" :value="4"></el-option>
          <el-option label="财务人员" :value="5"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="员工职位">
        <el-input v-model="employee.position" placeholder="请输入职位名称"></el-input>
      </el-form-item>

      <!-- 跨两列 -->
      <el-form-item label="入职时间">
        <el-date-picker
            v-model="employee.hireDate"
            type="date"
            placeholder="选择入职日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="出生日期">
        <el-date-picker
            v-model="employee.birthDate"
            type="date"
            placeholder="选择出生日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="薪资级别">
        <el-input v-model="employee.currentSalaryLevel" placeholder="请输入薪资级别"></el-input>
      </el-form-item>

      <el-form-item label="员工备注">
        <el-input
            v-model="employee.comments"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
        ></el-input>
      </el-form-item>

      <!-- 按钮区域 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script src="../../script/employee/AddEmployee.js"></script>
<style scoped src="../../assets/style/AddEmployee.css"></style>